<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ site.title }}</title>
    {{include 'components/import'}}
    <script src="/javascripts/validator.min.js"></script>
</head>
<body>
    <!-- {{include 'components/site-nav'}} -->
    {{include 'components/header'}}
    <div class="container-fluid form-con" id="reg">
        <h2><strong class="container">用户注册</strong></h2>

        <div class="container">
          <div class="form-horizontal">
            <form id="regForm">
            <div class="form-group">
              <label for="username" class="col-sm-3 control-label">用户名：</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
              </div>
            </div>
            <div class="form-group">
              <label for="password" class="col-sm-3 control-label">登录密码：</label>
              <div class="col-sm-6">
                <input type="password" class="form-control" id="password" name="password" placeholder="登录密码" required>
              </div>
            </div>
            <div class="form-group">
              <label for="repassword" class="col-sm-3 control-label">确认密码：</label>
              <div class="col-sm-6">
                <input type="password" class="form-control" id="repassword" name="repassword" placeholder="确认密码" required>
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="col-sm-3 control-label">用户邮箱：</label>
              <div class="col-sm-6">
                <input type="email" class="form-control" id="email" name="email" placeholder="用户邮箱">
              </div>
            </div>
            <div class="form-group">
              <label for="name" class="col-sm-3 control-label">称呼：</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="name" name="name" placeholder="称呼">
              </div>
            </div>
            <div class="form-group">
              <label for="gender" class="col-sm-3 control-label">性别：</label>
              <div class="col-sm-6">
                <label class="checkbox-inline">
                  <input type="radio" id="male" name="gender" value="male"> 先生
                </label>
                <label class="checkbox-inline">
                  <input type="radio" id="female" name="gender" value="female"> 女士
                </label>
              </div>
            </div>
            <!-- <div class="form-group">
              <label for="address" class="col-sm-3 control-label">联系地址：</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="address" name="address" placeholder="联系地址">
              </div>
            </div> -->
            <div class="form-group">
              <label for="phone" class="col-sm-3 control-label">联系电话：</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="phone" name="phone" placeholder="联系电话">
              </div>
            </div>
            <div class="form-group">
              <label for="code" class="col-sm-3 control-label">验证码：</label>
              <div class="col-sm-6 code">
                <input type="text" class="form-control" id="code" name="code" placeholder="验证码"><img src="/captcha" alt="code" />
                <span>{{captcha}}</span>
              </div>
            </div>
            </form>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-6">
                <button type="button" class="btn btn-theme" onClick="submit()">确认注册</button>
                <button type="button" class="btn btn-default">取消</button>
              </div>
            </div>
          </div>
        </div>

      </div>
      {{include 'components/footer'}}

    <script>
        function postForm(data, callback){
            // var site = site.subDomain;
            $.ajax({
                type: "POST",
                url: "/regiter",
                data: data,
                beforeSend: function (XMLHttpRequest) {
                    //ShowLoading();
                },
                success: function (data, textStatus) {
                    callback(data)
                },
                complete: function (XMLHttpRequest, textStatus) {
                    //HideLoading();
                },
                error: function () {
                    //请求出错处理
                }
            });
        }

        function checkForm(data){
           if(!data.username || !data.password || !data.repassword) {
                return false
           }

           if(data.password != data.repassword){
               return false
           }

           return true
        }

        function err(){
            bootbox.alert('请正确填写表单')
        }

        function submit() {
            var formdata = $('form').serializeArray()
            var postdata = {}
            for(var i = 0; i < formdata.length; i++){
                postdata[formdata[i].name] = formdata[i].value
            }


            if(!checkForm(postdata)){
                err()
                return false
            }

            postForm(postdata, function(data){
                if (!data.ok) {
                  bootbox.alert(data.msg);
                }
                else {
                  bootbox.alert('注册成功');
                }
                // console.log('success')
            })
        }

    </script>
</body>
</html>
